<template>
  <div id="app">
    <Child :title="msg" @child-click="handlerChildClick"/>
    <ToDoList
    @add-list="addList"
    @reserve="reserve"
    @remove-all="removeAll"/>
    <div class="box">
      <ul v-for="(item,index) in listData" :key="index">
        <h2>这里是代办清单</h2>
        <li>{{index+1}}---{{item}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
  import {ref} from "vue";
  import Child from "./components/Child.vue";
  import ToDoList from "./components/ToDoList.vue"
  export default {
    components:{
      Child,ToDoList
    },
    setup() {
      const msg=ref("我是父组件的值");
      const listData=ref([]);

      const handlerChildClick=(msg)=>{
        alert(msg)
      };

    const addList=(value)=>{
      listData.value.push(value)
    }

    const removeAll=()=>{
      listData.value=[]
    }
// 清空输入框
    // const reserve=()=>{

    // }
      return{
        msg,
        handlerChildClick,
        removeAll,
        addList,
        listData
      }
    }
    }
</script>
<style scoped>
  .box{
    height: 600px;
    width: 200px;
    background-color: #ccc;
  }
  div{
    text-align: initial;
  }
</style>